<template>
  <div class="template-container" @mousemove="mouseMove">
    <div style="margin-top: 65px">
    </div>
    <!-- 下方区域 -->
    <div class="bg-light" :style="{ 'margin-left': sidebar.width + 'px' }">
      <!-- 中心区域 -->
      <div class="" style="overflow: auto">
        <!-- images -->
        <!-- 上方工具操作栏 -->
        <div class="radio-container">
          <div class="radio-inputs">
            <label class="radio" @mousedown="createUploadImage">
              <input type="radio" name="radio" checked=""><span class="name">
                <svg t="1711522983226" class="top-icon up-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="7512" width="200" height="200">
                  <path
                    d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857zM518.460952 93.671619l172.373334 172.373333-51.687619 51.736381-84.601905-84.577523v348.306285h-73.142857V234.22781l-83.626667 83.577904-51.712-51.712 172.373333-172.397714z"
                    p-id="7513"></path>
                </svg>上传图片</span>
            </label>
            <label class="radio" @click="createScanTask">
              <input type="radio" name="radio">
              <span class="name"><svg t="1711523216715" class="top-icon scan-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="13596" width="200" height="200">
                  <path
                    d="M195.047619 658.285714v170.666667h182.832762v73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857v-170.666667h73.142857z m707.047619 0v170.666667a73.142857 73.142857 0 0 1-73.142857 73.142857h-182.881524v-73.142857H828.952381v-170.666667h73.142857z m-97.523809-182.857143v73.142858H219.428571v-73.142858h585.142858zM828.952381 121.904762a73.142857 73.142857 0 0 1 73.142857 73.142857v170.666667h-73.142857V195.047619h-182.857143V121.904762H828.952381zM377.904762 121.904762v73.142857H195.047619v170.666667H121.904762V195.047619a73.142857 73.142857 0 0 1 73.142857-73.142857h182.857143z"
                    p-id="13597"></path>
                </svg>扫描目录</span>
            </label>
            <label class="radio" @click="showCreateForm">
              <input type="radio" name="radio">
              <span class="name"><svg t="1711523216715" class="top-icon scan-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="13596" width="200" height="200">
                  <path
                    d="M195.047619 658.285714v170.666667h182.832762v73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857v-170.666667h73.142857z m707.047619 0v170.666667a73.142857 73.142857 0 0 1-73.142857 73.142857h-182.881524v-73.142857H828.952381v-170.666667h73.142857z m-97.523809-182.857143v73.142858H219.428571v-73.142858h585.142858zM828.952381 121.904762a73.142857 73.142857 0 0 1 73.142857 73.142857v170.666667h-73.142857V195.047619h-182.857143V121.904762H828.952381zM377.904762 121.904762v73.142857H195.047619v170.666667H121.904762V195.047619a73.142857 73.142857 0 0 1 73.142857-73.142857h182.857143z"
                    p-id="13597"></path>
                </svg>创建目录</span>
            </label>
            <label class="radio" @click="createBatchTask">
              <input type="radio" name="radio">
              <span class="name"><svg t="1711523362538" class="top-icon anno-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="32039" width="200" height="200">
                  <path
                    d="M760.807619 541.842286l122.075429 120.295619c13.702095 13.507048 21.406476 31.841524 21.406476 50.95619 0 19.114667-7.704381 37.449143-21.406476 50.956191l-116.419048 114.761143a73.630476 73.630476 0 0 1-51.687619 21.113904 73.630476 73.630476 0 0 1-51.687619-21.113904l-125.244952-123.367619 52.419047-50.224762 24.697905 24.356571 73.971809-72.923429 51.687619 50.956191-73.923047 72.899048 48.079238 47.37219 116.419048-114.761143-122.831239-121.051428 52.443429-50.224762z m-132.339809-275.821715l146.846476 148.796953-432.859429 417.011809-150.186667 50.858667a29.257143 29.257143 0 0 1-37.741714-34.864762l41.569524-165.254095 432.37181-416.548572zM306.541714 123.855238a73.630476 73.630476 0 0 1 51.687619 21.113905l153.990096 151.82019-52.419048 50.224762-153.258667-151.088762L190.171429 310.686476l48.030476 47.372191 73.923047-72.899048 51.687619 50.980571-73.923047 72.899048 51.858286 51.126857-52.443429 50.249143-150.844952-148.772571a71.558095 71.558095 0 0 1-21.406477-50.956191c0-19.114667 7.704381-37.449143 21.406477-50.95619l116.419047-114.761143a73.630476 73.630476 0 0 1 51.687619-21.113905z m449.365334 22.918095a39.009524 39.009524 0 0 1 54.930285 0.414477l83.041524 83.553523a39.009524 39.009524 0 0 1-0.390095 55.369143l-79.189333 77.433905-136.484572-140.434286z"
                    p-id="32040"></path>
                </svg>批量标注</span>
            </label>
            <label class="radio" @click="exportModal">
              <input type="radio" name="radio">
              <span class="name"> <svg t="1711523302489" class="top-icon export-icon" viewBox="0 0 1024 1024"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19938" width="200" height="200">
                  <path
                    d="M93.500952 429.348571C135.265524 217.965714 327.850667 71.582476 540.94019 86.332952a36.571429 36.571429 0 0 1-5.046857 72.94781c-159.646476-11.02019-305.493333 87.210667-357.449143 235.715048a780.434286 780.434286 0 0 0 177.956572 112.518095l5.632-11.215238 6.168381-11.800381c27.964952-52.49219 58.026667-95.524571 88.380952-129.852953l-43.958857-12.263619c-33.084952-9.240381-36.327619-54.857143-4.87619-68.705524L698.855619 145.554286c31.47581-13.848381 62.927238 19.431619 47.323429 50.078476l-9.508572 19.748571-6.826666 14.799238-7.289905 16.457143a1756.038095 1756.038095 0 0 0-52.906667 136.533334c-22.040381 64.731429-40.033524 129.340952-53.028571 192.853333 82.895238 7.289905 165.64419 1.316571 245.711238-17.310476 12.409905-92.476952-12.166095-184.758857-67.535238-258.681905a36.571429 36.571429 0 1 1 58.563047-43.836952 425.569524 425.569524 0 0 1 76.8 340.041142A426.73981 426.73981 0 0 1 568.198095 935.009524a36.571429 36.571429 0 0 1-41.106285-31.792762 832.999619 832.999619 0 0 1-7.094858-119.759238c1.340952-135.606857 31.353905-279.771429 80.457143-423.887238a1852.025905 1852.025905 0 0 1 40.911238-108.763429l-110.543238 48.664381 6.972953 1.950476c29.622857 8.289524 36.449524 47.177143 11.385904 65.024l-0.633904 0.487619a151.113143 151.113143 0 0 0-7.387429 6.144l-4.729905 4.291048c-6.485333 5.973333-13.604571 13.165714-21.211428 21.528381-27.867429 30.671238-55.978667 70.363429-82.407619 120.027428-8.411429 15.750095-16.457143 32.182857-24.137143 49.298286l-0.195048 0.658286a37.10781 37.10781 0 0 1-1.048381 2.31619c-33.865143 76.141714-60.367238 165.814857-77.287619 270.140953a36.473905 36.473905 0 0 1-15.164952 24.112762l-0.487619 0.316952a35.742476 35.742476 0 0 1-11.264 5.12l-0.804572 0.195048a34.255238 34.255238 0 0 1-3.559619 0.658285l-1.121524 0.121905a30.329905 30.329905 0 0 1-2.389333 0.170667h-0.853333a36.400762 36.400762 0 0 1-21.016381-6.241524 426.691048 426.691048 0 0 1-179.95581-436.419048z m748.909715 208.262096l-13.360762 2.389333c-73.898667 12.604952-149.455238 15.481905-225.060572 8.289524a1022.244571 1022.244571 0 0 0-10.873904 135.875047c-0.24381 24.380952 0.536381 48.225524 2.389333 71.41181a353.840762 353.840762 0 0 0 246.905905-217.965714zM160.52419 474.477714l-0.219428 2.145524a353.52381 353.52381 0 0 0 108.81219 292.278857c14.799238-71.509333 34.230857-136.265143 57.539048-194.56a852.943238 852.943238 0 0 1-166.13181-99.864381z"
                    p-id="19939"></path>
                </svg>导出图片</span>
            </label>
            <label class="radio" @click="importModal">
              <input type="radio" name="radio">
              <span class="name"> <svg t="1711523302489" class="top-icon export-icon" viewBox="0 0 1024 1024"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19938" width="200" height="200">
                  <path
                    d="M93.500952 429.348571C135.265524 217.965714 327.850667 71.582476 540.94019 86.332952a36.571429 36.571429 0 0 1-5.046857 72.94781c-159.646476-11.02019-305.493333 87.210667-357.449143 235.715048a780.434286 780.434286 0 0 0 177.956572 112.518095l5.632-11.215238 6.168381-11.800381c27.964952-52.49219 58.026667-95.524571 88.380952-129.852953l-43.958857-12.263619c-33.084952-9.240381-36.327619-54.857143-4.87619-68.705524L698.855619 145.554286c31.47581-13.848381 62.927238 19.431619 47.323429 50.078476l-9.508572 19.748571-6.826666 14.799238-7.289905 16.457143a1756.038095 1756.038095 0 0 0-52.906667 136.533334c-22.040381 64.731429-40.033524 129.340952-53.028571 192.853333 82.895238 7.289905 165.64419 1.316571 245.711238-17.310476 12.409905-92.476952-12.166095-184.758857-67.535238-258.681905a36.571429 36.571429 0 1 1 58.563047-43.836952 425.569524 425.569524 0 0 1 76.8 340.041142A426.73981 426.73981 0 0 1 568.198095 935.009524a36.571429 36.571429 0 0 1-41.106285-31.792762 832.999619 832.999619 0 0 1-7.094858-119.759238c1.340952-135.606857 31.353905-279.771429 80.457143-423.887238a1852.025905 1852.025905 0 0 1 40.911238-108.763429l-110.543238 48.664381 6.972953 1.950476c29.622857 8.289524 36.449524 47.177143 11.385904 65.024l-0.633904 0.487619a151.113143 151.113143 0 0 0-7.387429 6.144l-4.729905 4.291048c-6.485333 5.973333-13.604571 13.165714-21.211428 21.528381-27.867429 30.671238-55.978667 70.363429-82.407619 120.027428-8.411429 15.750095-16.457143 32.182857-24.137143 49.298286l-0.195048 0.658286a37.10781 37.10781 0 0 1-1.048381 2.31619c-33.865143 76.141714-60.367238 165.814857-77.287619 270.140953a36.473905 36.473905 0 0 1-15.164952 24.112762l-0.487619 0.316952a35.742476 35.742476 0 0 1-11.264 5.12l-0.804572 0.195048a34.255238 34.255238 0 0 1-3.559619 0.658285l-1.121524 0.121905a30.329905 30.329905 0 0 1-2.389333 0.170667h-0.853333a36.400762 36.400762 0 0 1-21.016381-6.241524 426.691048 426.691048 0 0 1-179.95581-436.419048z m748.909715 208.262096l-13.360762 2.389333c-73.898667 12.604952-149.455238 15.481905-225.060572 8.289524a1022.244571 1022.244571 0 0 0-10.873904 135.875047c-0.24381 24.380952 0.536381 48.225524 2.389333 71.41181a353.840762 353.840762 0 0 0 246.905905-217.965714zM160.52419 474.477714l-0.219428 2.145524a353.52381 353.52381 0 0 0 108.81219 292.278857c14.799238-71.509333 34.230857-136.265143 57.539048-194.56a852.943238 852.943238 0 0 1-166.13181-99.864381z"
                    p-id="19939"></path>
                </svg>导入标注</span>
            </label>
          </div>
        </div>
        <!-- 详细信息等下方物体 -->
        <div class="main-container" v-show="tab == 'images'">
          <div class="top-section">
            <!-- 导出页面 -->
            <div class="main-container2" v-show="datasetExports.length>0">
              <div class="text-muted" :key="exp.index" v-for="exp in datasetExports">
                <div class="media-body lh-125 border-bottom border-gray">
                 Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago
                  <div style="display: inline">
                    <span :key="tag.index" v-for="tag in exp.tags" class="badge badge-secondary" style="margin: 1px">
                      {{ tag }}
                    </span>
                  </div>
                  <div class="download-right">
                  <form class="radio-container2">
                    <div class="radio-wrapper">
                      <label class="radio-button">
                        <input id="option1" name="radio-group" type="radio" value="coco" v-model="exp.select">
                        <span class="radio-checkmark"></span>
                        <span class="radio-label">Coco</span>
                      </label>
                    </div>

                    <div class="radio-wrapper">
                      <label class="radio-button">
                        <input id="option2" name="radio-group" type="radio" value="yolo"
                        v-model="exp.select">
                        <span class="radio-checkmark"></span>
                        <span class="radio-label">Yolo</span>
                      </label>
                    </div>

                    <div class="radio-wrapper">
                      <label class="radio-button">
                        <input id="option3" name="radio-group" type="radio" value="voc"
                        v-model="exp.select">
                        <span class="radio-checkmark"></span>
                        <span class="radio-label">Voc</span>
                      </label>
                    </div>
                  </form>
                  <button class="btn btn-sm btn-success download-button" style="float: right; margin: 2px; padding: 2px; width: 60px"
                    @click="downloadExport(exp.id,exp.select)">
                    下载
                  </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="top-title">
              详细信息
            </div>
            <div class="paths">
              <svg t="1711460678184" class="home" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="30002" id="mx_n_1711460678185" width="18" height="18">
                <path
                  d="M904.699382 574.392002l58.97416-58.97416-118.529557-118.520347 0.005117-213.882252-81.07041 0 0.00307 132.827191L513.284761 65.066925l-1.11438 1.113357-1.113357-1.113357L60.696896 515.416819l58.993602 58.95574 70.992891-70.991868 0.008186 456.137715 81.050967 0L271.742543 959.485661l492.354568 0.027629 0 0.005117 81.032548 0 0 0 0.019443 0L845.149101 878.429577l-0.017396 0 0.00921-363.590925L904.699382 574.392002zM764.095064 878.434693l-168.609139 0.010233L595.485925 607.621824l-166.594249 0 0 270.831288-157.149133 0.00921 0-456.138738 239.313457-239.308341 1.113357 1.113357 1.11438-1.113357 250.80007 250.77551L764.095064 878.434693z"
                  p-id="30003" fill="#764ba2"></path>
              </svg>
              <div class="path-button" @click="folders=[]">/
                {{ dataset.name }}
              </div>
              <div v-for="(folder, folderId) in folders" :key="folderId" class="">
                <div class="path-button"
                  @click="removeFolder(folder)">
                  / {{ folder }} 
                </div>
              </div>
            </div>
            <p class="text-center" v-if="images.length < 1">
              无图片
            </p>
            <!-- 图片 -->
            <div v-else>
              <div class="image-grid">
                <ImageCard v-for="image in images" :key="image.id" :image="image" />
              </div>
            </div>
          </div>
          <!-- <Pagination :pages="pages" @pagechange="updatePage" /> -->
        </div>
        
        <!-- 导出页面 -->
        <div class="main-container2" v-show="tab == 'exports'">
          <h6 class="border-bottom border-gray pb-2"><b>可下载列表</b></h6>
          <div class="text-muted" :key="exp.index" v-for="exp in datasetExports">
            <div class="media-body lh-125 border-bottom border-gray">
              {{ exp.id }}. Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago
              <div style="display: inline">
                <span :key="tag.index" v-for="tag in exp.tags" class="badge badge-secondary" style="margin: 1px">
                  {{ tag }}
                </span>
              </div>
              <div class="download-right">
              <form class="radio-container2">
                <div class="radio-wrapper">
                  <label class="radio-button">
                    <input id="option1" name="radio-group" type="radio" value="coco" v-model="exp.select">
                    <span class="radio-checkmark"></span>
                    <span class="radio-label">Coco</span>
                  </label>
                </div>

                <div class="radio-wrapper">
                  <label class="radio-button">
                    <input id="option2" name="radio-group" type="radio" value="yolo"
                    v-model="exp.select">
                    <span class="radio-checkmark"></span>
                    <span class="radio-label">Yolo</span>
                  </label>
                </div>

                <div class="radio-wrapper">
                  <label class="radio-button">
                    <input id="option3" name="radio-group" type="radio" value="voc"
                    v-model="exp.select">
                    <span class="radio-checkmark"></span>
                    <span class="radio-label">Voc</span>
                  </label>
                </div>
              </form>
              <button class="btn btn-sm btn-success download-button" style="float: right; margin: 2px; padding: 2px; width: 60px"
                @click="downloadExport(exp.id,exp.select)">
                下载
              </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 侧区域 -->
    <div id="filter" ref="sidebar" class="sidebar" :style="{ width: 260 + 'px' }">
      <div style="padding-top: 10px"> </div>
      <div class="dataset-info side-label">导航</div>
      <div class="image-section" :class="{ side_active_1: activePart == 0&&showChildrenflag }">
          <div class="images level-1" @click="tab = 'images'; activePart = '0';showChildrenflag=!showChildrenflag">
            <svg t="1711346764245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7478" width="200" height="200">
              <path
                d="M170.057143 290.816v489.179429h568.832V853.333333H206.336C146.236952 853.333333 97.52381 804.08381 97.52381 743.326476v-452.510476h72.533333zM853.333333 170.666667a73.142857 73.142857 0 0 1 73.142857 73.142857v414.47619a73.142857 73.142857 0 0 1-73.142857 73.142857H292.571429a73.142857 73.142857 0 0 1-73.142858-73.142857V243.809524a73.142857 73.142857 0 0 1 73.142858-73.142857h560.761904z m0 73.142857H292.571429v414.47619h560.761904V243.809524z m-382.195809 90.550857l120.978286 120.929524 51.078095-51.078095 155.160381 155.16038-51.102476 51.102477-103.326477-103.375238-51.102476 51.151238-121.392762-121.417143-87.552 86.113524-51.833905-51.833905 139.093334-136.752762zM755.809524 292.571429a48.761905 48.761905 0 1 1 0 97.523809 48.761905 48.761905 0 0 1 0-97.523809z"
                p-id="7479"></path>
            </svg>
            目录导航
            <svg t="1711346986329" class="icon right-icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="13952" width="200" height="200">
              <path
                d="M605.086476 512.146286L338.358857 245.272381l51.760762-51.687619 318.415238 318.585905L390.095238 830.415238l-51.687619-51.736381z"
                p-id="13953"></path>
            </svg>
          </div>
          <div class="level-2" v-show="showChildren">
            <div v-for="child in children" :key="child.name" class="level-2-item" 
            @click.prevent="yieldFolder(child.name)">
            <div class="level-2-title">{{ child.name }}</div>
            <div class="level-2-content" v-show="child.children.length>0">
              <div v-for="(item,index) in child.children" :key="index" class="level-3-item" @click="yieldFile(child.name+'/'+item.name)"
              v-show="item.type=='folder'">
                {{ item.name }}
              </div>
            </div>
            </div>
          </div>
      </div>
      <div class="category-section" :class="{ side_active_1: showCategory}">
          <div class="images level-1" @click="tab = 'images'; activePart = '1';showCaregoryflag=!showCaregoryflag">
            <svg t="1711346764245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7478" width="200" height="200">
              <path
                d="M170.057143 290.816v489.179429h568.832V853.333333H206.336C146.236952 853.333333 97.52381 804.08381 97.52381 743.326476v-452.510476h72.533333zM853.333333 170.666667a73.142857 73.142857 0 0 1 73.142857 73.142857v414.47619a73.142857 73.142857 0 0 1-73.142857 73.142857H292.571429a73.142857 73.142857 0 0 1-73.142858-73.142857V243.809524a73.142857 73.142857 0 0 1 73.142858-73.142857h560.761904z m0 73.142857H292.571429v414.47619h560.761904V243.809524z m-382.195809 90.550857l120.978286 120.929524 51.078095-51.078095 155.160381 155.16038-51.102476 51.102477-103.326477-103.375238-51.102476 51.151238-121.392762-121.417143-87.552 86.113524-51.833905-51.833905 139.093334-136.752762zM755.809524 292.571429a48.761905 48.761905 0 1 1 0 97.523809 48.761905 48.761905 0 0 1 0-97.523809z"
                p-id="7479"></path>
            </svg>
            种类导航
            <svg t="1711346986329" class="icon right-icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="13952" width="200" height="200">
              <path
                d="M605.086476 512.146286L338.358857 245.272381l51.760762-51.687619 318.415238 318.585905L390.095238 830.415238l-51.687619-51.736381z"
                p-id="13953"></path>
            </svg>
          </div>
          <div class="level-2" v-show="activePart == 1&&showCaregoryflag">
            <div v-for="category in categories" :key="category.name" class="level-2-item" 

            >{{ category.name }}</div>
          </div>
      </div>
    </div>

    <!-- 表单们 -->
    <!-- 批量处理表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="batchPromptInput">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">批量标注</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label>选择标注类别(空则标注全部类别)</label>
                <TagsInput v-model="batchLabeling.categories" element-id="batchLabelingCategories"
                  :existing-tags="categoryTags" :typeahead="true" :typeahead-activation-threshold="0"></TagsInput>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="sendBatchPrompt">
              开始
            </button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 上传图片表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="imageUpload">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">上传图片</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <input type="file" class="form-control-file" id="image"
                  @change="(event) => { imageFile = event.target.files[0] }" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="sendIamge" data-dismiss="modal">
              开始
            </button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="uploadTab = false">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 导出coco表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="exportDataset">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">导出 {{ dataset.name }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label>导出类别 (空则导出全部)</label>
                <TagsInput v-model="exporting.categories" element-id="exportCategories" :existing-tags="categoryTags"
                  :typeahead="true" :typeahead-activation-threshold="0"></TagsInput>
              </div>
              <div>
                <input type="checkbox" class="form-check-input" v-model="exporting.with_empty_images">
                <label class="form-check-label">同时导出未标注的图片</label>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="exportCOCO">
              导出
            </button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 导入coco表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="cocoUpload">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Upload COCO Annotaitons</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="coco">COCO Annotation file (.json)</label>
                <input type="file" class="form-control-file" id="coco" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-primary"
              @click="importCOCO"
              data-dismiss="modal"
            >
              Upload
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 创建目录表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="mkdirForm">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">创建目录</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <label>请输入子目录名称：</label>
              <div class="form-group">
                <input v-model="newdir"/>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="createDirectory" data-dismiss="modal">
              确认
            </button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="uploadTab = false">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import toastrs from "@/mixins/toastrs";
import Dataset from "@/models/datasets";
import Export from "@/models/exports";
import ImageCard from "@/components/cards/ImageCard";
// import Pagination from "@/components/Pagination";
// import PanelString from "@/components/PanelInputString";
// import PanelToggle from "@/components/PanelToggle";
// import PanelDropdown from "@/components/PanelInputDropdown";
import JQuery from "jquery";
import TagsInput from "@/components/TagsInput";

import { mapMutations } from "vuex";

let $ = JQuery;

export default {
  name: "Dataset",
  components: {
    ImageCard,
    // Pagination,
    // PanelString,
    // PanelToggle,
    // PanelDropdown,
    TagsInput,
  },
  mixins: [toastrs],
  props: {
    identifier: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      activePart: 0,
      pages: 1,
      generateLimit: 100,
      limit: 52,
      imageCount: 0,
      imageFile: null,
      categories: [],
      images: [],
      folders: [],
      children: [],
      dataset: {
        id: 0,
      },
      users: [],
      subdirectories: [],
      status: {
        data: { state: true, message: "Loading data" },
      },
      keyword: "",
      mouseDown: false,
      sidebar: {
        drag: false,
        width: window.innerWidth * 0.5,
        canResize: false,
      },
      scan: {
        progress: 0,
        id: null,
      },
      generate: {
        progress: 0,
        id: null,
      },
      batchLabeling: {
        categories: [],
        progress: 0,
        id: null,
      },
      importing: {
        progress: 0,
        id: null,
      },
      exporting: {
        categories: [],
        progress: 0,
        with_empty_images: false,
        id: null,
      },
      selected: {
        categories: [],
      },
      datasetExports: [],
      tab: "images",
      uploadTab: false,
      order: "file_name",
      orderTypes: {
        file_name: "File Name",
        id: "Id",
        path: "File Path",
      },
      query: {
        file_name__icontains: "",
        ...this.$route.query,
      },
      panel: {
        showAnnotated: true,
        showNotAnnotated: true,
      },
      stats: null,
      newdir: null,
      showChildrenflag: true,
      showCaregoryflag: true,
    };
  },
  methods: {
    ...mapMutations(["addProcess", "removeProcess"]),
    generateDataset() {
      if (this.keyword.length === 0) return;

      Dataset.generate(this.dataset.id, {
        keywords: [this.keyword],
        limit: this.generateLimit,
      });
    },
    showCreateForm() {
      this.uploadTab = true;
      $("#mkdirForm").modal("show");
    },
    createDirectory() {
      $("#mkdirForm").modal("hide");
      this.uploadTab = false;
      let id = this.dataset.id;
      Dataset.postNewdir(id, this.folders.join("/"), this.newdir)
        .then(() => {
          this.updatePage();
        })
        .catch((error) => {
          this.axiosReqestError("createDirectory", error.response.data.message);
        });
      this.newdir = null;
    },
    createUploadImage() {
      this.uploadTab = true;
      $("#imageUpload").modal("show");
    },
    sendIamge() {
      $("#imageUpload").modal("hide");
      this.uploadTab = false;
      let id = this.dataset.id;
      Dataset.uploadImage(id, this.imageFile)
        .then(() => {
          this.updatePage();
        })
        .catch((error) => {
          this.axiosReqestError("upload image", error.response.data.message);
        });
    },
    updatePage(page) {
      let process = "Loading images from dataset";
      this.addProcess(process);

      Dataset.getData(this.dataset.id, {
        page: page,
        limit: this.limit,
        folder: this.folders.join("/"),
        ...this.query,
        annotated: this.queryAnnotated,
        category_ids__in: encodeURI(this.selected.categories),
        order: this.order,
      })
        .then((response) => {
          let data = response.data;
          this.images = data.images;
          this.dataset = data.dataset;
          this.categories = data.categories;

          this.imageCount = data.total;
          this.pages = data.pages;

          this.subdirectories = data.subdirectories;
          // this.scan.id = data.scanId;
          // this.generate.id = data.generateId;
          // this.importing.id = data.importId;
          // this.exporting.id = data.exportId;
        })
        .catch((error) => {
          this.axiosReqestError("Loading Dataset", error.response.data.message);
        })
        .finally(() => this.removeProcess(process));
      Dataset.getChildrenPath(this.dataset.id, this.folders.join("/")).then(
        (response) => {
          this.children = response.data.children.filter((el) => {
            return el.type === "folder";
          });
        }
      );
    },
    getUsers() {
      Dataset.getUsers(this.dataset.id).then((response) => {
        this.users = response.data;
      });
    },
    downloadExport(id, type) {
      Export.download(id, this.dataset.name, type);
    },
    getExports() {
      Dataset.getExports(this.dataset.id).then((response) => {
        this.datasetExports = response.data;
        this.datasetExports.splice(1);
      });
    },
    resetMetadata() {
      let r = confirm("警告：你无法撤回该操作!");
      if (r) {
        Dataset.resetMetadata(this.dataset.id);
      }
    },
    getStats() {
      Dataset.getStats(this.dataset.id).then((response) => {
        this.stats = response.data;
      });
    },
    createScanTask() {
      // if (this.scan.id != null) {
      //   this.$router.push({ path: "/tasks", query: { id: this.scan.id } });
      //   return;
      // }
      Dataset.scan(this.dataset.id)
        .then((response) => {
          let id = response.data.id;
          this.scan.id = id;
        })
        .catch((error) => {
          this.axiosReqestError(
            "Scanning Dataset",
            error.response.data.message
          );
        });
    },
    exportModal() {
      if (this.exporting.id != null) {
        this.$router.push({ path: "/tasks", query: { id: this.exporting.id } });
        return;
      }
      $("#exportDataset").modal("show");
    },
    exportCOCO() {
      $("#exportDataset").modal("hide");
      Dataset.exportingCOCO(
        this.dataset.id,
        this.exporting.categories,
        this.exporting.with_empty_images
      )
        .then((response) => {
          let id = response.data.id;
          this.exporting.id = id;
        })
        .catch((error) => {
          this.axiosReqestError("Exporting COCO", error.response.data.message);
        })
        .finally(() => this.removeProcess(process));
    },
    removeFolder(folder) {
      let index = this.folders.indexOf(folder);
      this.folders.splice(index + 1, this.folders.length);
    },
    yieldFolder(folder) {
      this.folders.push(folder);
    },
    createBatchTask() {
      if (this.batchLabeling.id != null) {
        this.$router.push({
          path: "/tasks",
          query: { id: this.batchLabeling.id },
        });
        return;
      }

      $("#batchPromptInput").modal("show");
    },
    sendBatchPrompt() {
      $("#batchPromptInput").modal("hide");
      console.log(
        this.dataset.id + " " + "[" + this.batchLabeling.categories + "]"
      );

      Dataset.sendBatchTask(this.dataset.id, this.batchLabeling.categories)
        .then(() => {
          this.axiosReqestSuccess("batch success");
        })
        .catch((error) => {
          this.axiosReqestError("batch labeling", error.response.data.message);
        })
        .finally(() => this.removeProcess(process));
    },
    importModal() {
      if (this.importing.id != null) {
        this.$router.push({ path: "/tasks", query: { id: this.importing.id } });
        return;
      }

      $("#cocoUpload").modal("show");
    },
    importCOCO() {
      let uploaded = document.getElementById("coco");
      Dataset.uploadCoco(this.dataset.id, uploaded.files[0])
        .then((response) => {
          let id = response.data.id;
          this.importing.id = id;
        })
        .catch((error) => {
          this.axiosReqestError("Importing COCO", error.response.data.message);
        })
        .finally(() => this.removeProcess(process));
    },
    mouseMove(event) {
      let element = this.$refs.sidebar;

      let sidebarWidth = element.offsetWidth;
      let clickWidth = event.x;
      let pixelsFromSide = Math.abs(sidebarWidth - clickWidth);

      this.sidebar.drag = pixelsFromSide < 4;

      // if (this.sidebar.canResize) {
      //   event.preventDefault();
      //   let max = window.innerWidth * 0.5;
      //   this.sidebar.width = Math.min(Math.max(event.x, 150), max);
      //   localStorage.setItem("dataset/sideWidth", this.sidebar.width);
      // }
    },
    startDrag() {
      this.mouseDown = true;
      this.sidebar.canResize = this.sidebar.drag;
    },
    stopDrag() {
      this.mouseDown = false;
      this.sidebar.canResize = false;
    },
  },
  computed: {
    queryAnnotated() {
      let showAnnotated = this.panel.showAnnotated;
      let showNotAnnotated = this.panel.showNotAnnotated;

      if (showAnnotated && showNotAnnotated) return null;
      if (!showAnnotated && !showNotAnnotated) return " ";

      return showAnnotated;
    },
    categoryTags() {
      let tags = {};
      this.categories.forEach((c) => (tags[c.id] = c.name));
      return tags;
    },
    showChildren() {
      if (this.activePart == 0 && this.showChildrenflag) {
        return true;
      } else {
        return false;
      }
    },
    showCategory() {
      if (this.activePart == 1 && this.showCaregoryflag) {
        return true;
      } else {
        return false;
      }
    },
  },
  sockets: {
    taskProgress(data) {
      if (data.id === this.scan.id) {
        this.scan.progress = data.progress;
      }

      if (data.id === this.generate.id) {
        this.generate.progress = data.progress;
      }

      if (data.id === this.batchLabeling.id) {
        this.batchLabeling.progress = data.progress;
      }

      if (data.id === this.importing.id) {
        this.importing.progress = data.progress;
      }

      if (data.id === this.exporting.id) {
        this.exporting.progress = data.progress;
      }
    },
    annotating(data) {
      let image = this.images.find((i) => i.id == data.image_id);
      if (image == null) return;

      if (data.active) {
        let found = image.annotating.indexOf(data.username);
        if (found < 0) {
          image.annotating.push(data.username);
        }
      } else {
        image.annotating.splice(image.annotating.indexOf(data.username), 1);
      }
    },
  },
  watch: {
    "exporting.id"() {
      this.getExports();
    },
    tab(tab) {
      localStorage.setItem("dataset/tab", tab);
      if (tab == "members") this.getUsers();
      if (tab == "statistics") this.getStats();
      if (tab == "exports") this.getExports();
    },
    order(order) {
      localStorage.setItem("dataset/order", order);
      this.updatePage();
    },
    queryAnnotated() {
      this.updatePage();
    },
    "selected.categories"() {
      this.updatePage();
    },
    folders() {
      this.updatePage();
    },
    // "sidebar.drag"(canDrag) {
    //   let el = this.$refs.sidebar;
    //   if (canDrag) {
    //     this.$el.style.cursor = "ew-resize";
    //     el.style.borderRight = "4px solid #383c4a";
    //   } else {
    //     this.$el.style.cursor = "default";
    //     el.style.borderRight = "";
    //   }
    // },
    "scan.progress"(progress) {
      if (progress >= 100) {
        setTimeout(() => {
          this.scan.progress = 0;
          this.scan.id = null;
        }, 1000);
      }
    },
    "batchLabeling.progress"(progress) {
      if (progress >= 100) {
        setTimeout(() => {
          this.batchLabeling.progress = 0;
          this.batchLabeling.id = null;
        }, 1000);
      }
    },
    "importing.progress"(progress) {
      if (progress >= 100) {
        setTimeout(() => {
          this.importing.progress = 0;
          this.importing.id = null;
        }, 1000);
      }
    },
    "exporting.progress"(progress) {
      if (progress >= 100) {
        setTimeout(() => {
          this.exporting.progress = 0;
          this.exporting.id = null;

          this.getExports();
        }, 1000);
      }
    },
  },
  beforeRouteUpdate() {
    this.dataset.id = parseInt(this.identifier);
    this.updatePage();
  },
  created() {
    let tab = localStorage.getItem("dataset/tab");
    let order = localStorage.getItem("dataset/order");
    let sideWidth = localStorage.getItem("dataset/sideWidth");

    if (sideWidth !== null) this.sidebar.width = parseInt(sideWidth);
    if (tab !== null) this.tab = tab;
    if (order !== null) this.order = order;

    this.dataset.id = parseInt(this.identifier);
    this.updatePage();
  },
  mounted() {
    window.addEventListener("mouseup", this.stopDrag);
    window.addEventListener("mousedown", this.startDrag);
  },
  destroyed() {
    window.removeEventListener("mouseup", this.stopDrag);
    window.removeEventListener("mousedown", this.startDrag);
  },
};
</script>

<style scoped>
.template-container {
  height: 100vh;
  background-color: #f8f9fa;
}
/* 展示照片的区域 */
/* 上方的操作栏 */
.radio-container {
  margin-top: 2vh;
  display: flex;
  justify-content: space-around;
}

.top-icon {
  width: 18px;
  height: 18px;
}

.radio {
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}

.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #eee;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  font-size: 14px;
  width: 50%;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all 0.15s ease-in-out;
  width: 100%;
}

.radio-inputs .radio input:checked + .name {
  background-color: #fff;
  font-weight: 600;
}

/* 下方区域 */
.main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(90vh - 60px);
  padding: 32px;
  margin: 0px;
}

.top-title {
  font-size: 20px;
  font-weight: 400;
  display: flex;
  justify-content: start;
}

.paths {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.path-button {
  border: none;
  background-color: inherit;
  font-style: italic;
  color: rgb(126, 132, 139);
  display: flex;
  align-items: center;
}

.home {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.image-grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}

/* 侧边栏和乱七八糟的 */
.breadcrumb {
  padding: 0px;
  margin: 5px 0;
  background-color: inherit;
}

.btn-link {
  padding: 0px;
}

.progress {
  padding: 2px;
  height: 24px;
}

.sidebar {
  height: 100%;
  position: fixed;
  color: black;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  padding-top: 60px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.level-2-item:hover,
.level-1:hover {
  color: #8066ea;
  transition: all 0.5s;
}

.right-icon {
  transition: all 0.4s ease 0s;
}

.level-1:hover .right-icon,
.side_active_1 .right-icon {
  transform: rotate(90deg);
  transition: all 0.5s;
}

.side_active_1,
.side_active_2 {
  background-color: #f5f5f5;
  position: relative;
}

.side_active_1 .level-1 {
  color: #8066ea;
}

.side_active_1 .level-2 {
  background-color: transparent;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.side_active_2::after {
  position: absolute;
  content: "";
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 3px;
  height: 44px;
  top: 0px;
  left: 0px;
}

.side_active_1::after {
  position: absolute;
  content: "";
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  width: 3px;
  height: 44px;
  top: 0px;
  left: 0px;
}

.side-label {
  padding: 24px;
  font-size: 12px;
  color: black;
  display: flex;
  justify-self: start;
}

.level-1 {
  display: flex;
  align-items: center;
  widows: 100%;
  padding: 12px;
  font-size: 14px;
  padding-right: 0px;
  padding-left: 24px;
  padding-bottom: 10px;
  transition: all 0.4s ease 0s;
  cursor: pointer;
}

.icon {
  height: 22px;
  width: 22px;
  margin-right: 14px;
}

.right-icon {
  height: 14px;
  width: 14px;
  margin-left: auto;
}

.level-2 {
  padding-bottom: 4px;
}

.level-2-item {
  font-size: 12px;
  display: flex;
  padding: 12px;
  padding-left: 62px;
  transition: all 0.4s ease 0s;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
}
.level-3-item {
  font-size: 12px;
  display: flex;
  padding: 8px;
  /* padding-left: 86px; */
  transition: all 0.4s ease 0s;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
}
.level-3-content {
  display: block;
}
/* 下载部分 */
.main-container2 {
  margin: 30px;
  background-color: white;
  padding: 20px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
    rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  border-radius: 12px;
}
/* 下载栏的列 */
.media {
  padding: 0px !important;
}
.media-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.download-button {
  margin: 15px !important;
}
/* 选择下载种类 */
.download-right {
  display: flex;
}
.radio-container2 {
  margin: 0 auto;
  max-width: 300px;
  color: black;
  display: flex;
  gap: 10px;
  align-items: center;
}

.radio-wrapper {
  display: flex;
  align-items: center;
}

.radio-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin: 0px;
}

.radio-button:hover {
  transform: translateY(-2px);
}

.radio-button input[type="radio"] {
  display: none;
}

.radio-checkmark {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #333;
  border-radius: 50%;
}

.radio-checkmark:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  transition: all 0.2s ease-in-out;
}

.radio-button input[type="radio"]:checked ~ .radio-checkmark:before {
  transform: translate(-50%, -50%) scale(1);
}

.radio-label {
  font-size: 16px;
  font-weight: 600;
}
</style>
